<template>
  <slot name="search"></slot>
  <div ref="body" class="list-body" @scroll="scrollEvent">
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";

const body = ref<HTMLElement>()
const props = defineProps({
  occupyHeight: {
    type: String,
    default: '405px'
  }
});


interface IEmitsType {
  (e: 'loadNext'): void;
  (e: 'query', name: string): void;
}

const emit = defineEmits<IEmitsType>();


const scrollEvent = (e: EventSource) => {
  if (body.value!.scrollTop + body.value!.offsetHeight + 50 > body.value!.scrollHeight) {
    // 判断是否可以加载下一页
    emit('loadNext')
  }
}

</script>

<style lang="scss" scoped>
div.list-body {
  position: relative;
  margin: 2px;
  height: calc(100vh - v-bind('props.occupyHeight'));
  padding-right: 1px;
  overflow-x: hidden;
  overflow-y: auto;
}

</style>
